/**
 * 谨慎修改此文件，以防止影响其他组件布局
 *
 * 公用css   全局公用css请写在此文件下  share.less已在 App.vue 中全局引入
 */

/** half_border_after  前置::before
* 前6个参数为必传参数  @top,@right,@bottom,@left
* 其中：@top,@right,@bottom,@left 为控制线条的位置，像素、百分比、auto
* @attr 线条排列的宽、高属性，取值：height，width
* @pixel:1px 线条的粗细
* @color -- 线条颜色
*/
.half_border(@color: #ECECEC) {
	position: relative;
	&::before {
		position: absolute;
		background: @color;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		z-index: 2;
		content: '';
	}
}

// 左边框0.5px
.half_border_l(@color: #ECECEC) {
	.half_border(@color);
	&::before {
		right: auto;
		width: 1px;
		transform: scaleX(0.5);
	}
}
// 右边框0.5px
.half_border_r(@color: #ECECEC) {
	.half_border(@color);
	&::before {
		left: auto;
		width: 1px;
		transform: scaleX(0.5);
	}
}
// 上边框0.5px
.half_border_t(@color: #ECECEC) {
	.half_border(@color);
	&::before {
		bottom: auto;
		height: 1px;
		transform: scaleY(0.5);
	}
}
// 下边框0.5px
.half_border_b(@color: #ECECEC) {
	.half_border(@color);
	&::before {
		top: auto;
		height: 1px;
		transform: scaleY(0.5);
	}
}
// 全边框0.5px
.half_border_surround(@radius: 0px, @color: #ECECEC) {
	position: relative;
	&::before {
		position: absolute;
		box-sizing: border-box;
		content: ' ';
		pointer-events: none;
		top: -50%;
		right: -50%;
		bottom: -50%;
		left: -50%;
		border: 1px solid @color;
		transform: scale(0.5);
		border-radius: @radius * 2;
	}
}

// 底部安全区
.safe_position_bottom(@px:0px) {
	bottom: @px;
	bottom: calc(@px + constant(safe-area-inset-bottom));
	bottom: calc(@px + env(safe-area-inset-bottom));
}
.safe_padding_bottom(@px:0px) {
	padding-bottom: @px;
	padding-bottom: calc(@px + constant(safe-area-inset-bottom));
	padding-bottom: calc(@px + env(safe-area-inset-bottom));
}

//
.flex-xy() {
	display: flex;
	justify-content: center;
	align-items: center;
}

// 超出1行显示省略号…
.ellipsis() {
	overflow: hidden; // 超出范围不显示
	white-space: nowrap; // 超出不换行
	text-overflow: ellipsis; // 超出的文本显示省略号...
}

// 超出2行显示省略号…
.multiEllipsis(@num: 2) {
	overflow: hidden; //超出文本隐藏
	text-overflow: ellipsis; ///超出部分省略号显示
	display: -webkit-box; //弹性盒模型
	-webkit-box-orient: vertical; //上下垂直
	-webkit-line-clamp: @num; //自定义行数
}
